<template>
  <div class="profile">
    <div class="profile-card">
      <h2 class="profile-title">我的信息</h2>
      <el-form :model="form" label-width="90px" class="profile-form">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="昵称">
              <el-input v-model="form.userName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model.number="form.age" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- Placeholder for alignment, can be removed if not needed -->
          </el-col>
        </el-row>
        <el-form-item label="简介">
          <el-input v-model="form.introduce" type="textarea" :rows="3" />
        </el-form-item>
        <div class="profile-btn-row">
          <el-button type="primary" @click="showPwdDialog = true">修改密码</el-button>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
      </el-form>
      <el-dialog v-model="showPwdDialog" title="修改密码" width="400px">
        <el-form :model="pwdForm" label-width="90px">
          <el-form-item label="新密码">
            <el-input v-model="pwdForm.newPassword" type="password" show-password />
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="pwdForm.repeatPassword" type="password" show-password />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showPwdDialog = false">取消</el-button>
          <el-button type="primary" @click="changePassword">确定</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import common_util from '../util/common_util.js'
import { useRouter } from 'vue-router' // 引入 useRouter
const router = useRouter() // 初始化 router

const form = ref({
  userName: '',
  age: 0,
  phone: '',
  introduce: ''
})
const showPwdDialog = ref(false)
const pwdForm = ref({ newPassword: '', repeatPassword: '' })

onMounted(() => {
  axios.get('/api/user_info', { headers: common_util.accessHeader() }
  ).then(res => {
    if (res.data.code === 0) {
      const data = res.data.data
      form.value.userName = data.username || ''
      form.value.age = data.age || 0
      form.value.phone = data.phone || ''
      form.value.introduce = data.introduce || ''
    } else {
      ElMessage.error(res.data.msg)
    }
  })
})

function save() {
  axios.put('/api/user', {
    username: form.value.userName,
    age: form.value.age,
    phone: form.value.phone,
    introduce: form.value.introduce
  }, { headers: common_util.accessHeader() }).then(res => {
    if (res.data.code === 0) {
      ElMessage.success('保存成功')
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

function changePassword() {
  if (!pwdForm.value.newPassword || pwdForm.value.newPassword !== pwdForm.value.repeatPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  axios.put('/api/user/password', {
    password: pwdForm.value.newPassword
  }, { headers: common_util.accessHeader() }).then(res => {
    if (res.data.code === 0) {
      ElMessage.success('密码修改成功')
      showPwdDialog.value = false
      pwdForm.value.newPassword = ''
      pwdForm.value.repeatPassword = ''
    } else {
      ElMessage.error(res.data.msg)
    }
  })
}

function logout() {
  common_util.deleteAccessToken() // 清除 token
  ElMessage.success('已退出登录')
  router.push('/welcome/login') // 跳转到登录页
}
</script>

<style scoped>
.profile {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(270deg, #f5f7fa, #c3cfe2, #a1c4fd, #fbc2eb, #f5f7fa);
  background-size: 400% 400%;
  animation: gradientFlow 12s ease-in-out infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
  padding: 40px 32px 32px 32px;
  min-width: 400px;
  max-width: 520px;
}

.profile-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 32px;
}

.profile-form {
  margin-top: 0;
}

.profile-btn-row {
  display: flex;
  justify-content: flex-end;
  /* 将按钮靠右对齐 */
  gap: 10px;
  /* 添加按钮之间的间距 */
  margin-top: 18px;
}
</style>